<template>
  <div class="hellow-box">
    <section>
      <article>{{ timeTip }}</article>
      <div class="userInfo">
        <p v-if="userStore.role === 'student'">
          学号：<span>{{ userStore.userInfo.studentId }}</span>
        </p>
        <p>身份：<span>学 生</span></p>
      </div>
    </section>

    <section class="right-box">
      <p>{{ helloTip }}</p>
      <i :class="iconClass"></i>
    </section>
  </div>
</template>

<script setup lang="ts">
import { computed } from 'vue';
import { useUserStore } from '../../../../store/user';

const userStore = useUserStore();
const hours = new Date().getHours();

const iconClass = computed(() => {
  if (hours >= 6 && hours <= 10) return 'iconfont icon-morning';
  if (hours >= 11 && hours <= 13) return 'iconfont icon-eating';
  if (hours >= 14 && hours <= 17) return 'iconfont icon-afternoon'; 
  if ((hours >= 0 && hours <= 5) || (hours >= 20 && hours <= 24) || (hours >= 18 && hours <= 19)) return 'iconfont icon-night';
});

const helloTip = computed(() => {
  if (hours >= 6 && hours <= 10) return '现在是早上时间，开启美好的一天吧~';
  if (hours >= 11 && hours <= 13) return '现在是中午时间，吃完饭睡个午觉吧~';
  if (hours >= 14 && hours <= 17) return '现在是下午时间，要继续加油哦~';
  if (hours >= 18 && hours <= 19) return '现在是下午的饭点时间，要去吃饭哟~';
  if ((hours >= 0 && hours <= 5) || (hours >= 20 && hours <= 24)) return '现在是晚上时间，请注意休息哦~';
});

const timeTip = computed(() => {
  if (hours >= 6 && hours <= 10) return `上午好，${userStore.userInfo.name}！`;
  if (hours >= 11 && hours <= 13) return `中午好，${userStore.userInfo.name}！`;
  if (hours >= 14 && hours <= 17) return `下午好，${userStore.userInfo.name}！`;
  if (hours >= 18 && hours <= 19) return `傍晚好，${userStore.userInfo.name}！`;
  if ((hours >= 0 && hours <= 5) || (hours >= 20 && hours <= 24)) return `晚上好，${userStore.userInfo.name}！`;
});
</script>

<style lang="scss" scoped>
@import '../iconCss/index.css';
.hellow-box {
  padding: 16px;
  font-size: 16px;
  height: 100%;
  position: relative;
  display: flex;
  justify-content: space-between;
  align-items: center;

  article {
    font-size: 24px;
    letter-spacing: 2px;
  }

  .userInfo {
    margin-top: 8px;
    p {
      margin-right: 20px;
      display: inline-block;
      span {
        font-weight: bold;
      }
    }
  }

  .classTip {
    letter-spacing: 2px;
    div {
      font-size: 20px;
      font-weight: bold;
    }
  }

  .myTeachers {
    div {
      font-size: 20px;
      font-weight: bold;
    }
    p {
      span {
        margin-right: 16px;
        font-weight: bold;
      }
    }
  }

  .right-box {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    i {
      font-size: 85px;
    }
  }
}
</style>
